<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    class Subject {
        constructor() {
            this.observers = []
        }

        getState() {
            return this.state
        }

        setState(state) {
            this.state = state
        }

        attach(observer) {
            this.observers.push(observer)
        }

        notifyAllObservers() {
            for (const observer of this.observers) {
                observer.update()
            }
        }
    }

    // 二进制
    class BinaryObserver {
        constructor(subject) {
            this.subject = subject
            this.subject.attach(this)
        }

        update() {
            console.log('二进制是：' + this.subject.getState().toString(2))
        }
    }

    // 八进制
    class OctalObserver {
        constructor(subject) {
            this.subject = subject
            this.subject.attach(this)
        }

        update() {
            console.log('八进制是：' + this.subject.getState().toString(8))
        }
    }

    // 十六进制
    class HexObserver {
        constructor(subject) {
            this.subject = subject
            this.subject.attach(this)
        }

        update() {
            console.log('十六进制是：' + this.subject.getState().toString(16))
        }
    }

    const subject = new Subject()

    new HexObserver(subject)
    new OctalObserver(subject)
    new BinaryObserver(subject)

    subject.setState(10)
    subject.notifyAllObservers()

</script>
</body>
</html>
